<template>
  <div class="page-box">
    <!-- 头部区域 -->
    <tool-bar>
      <el-form :inline="true" size="small">
        <el-form-item label="广告图描述">
          <el-input
            v-model.trim="query.advimgdesc"
            placeholder="请输入广告位名称"
            clearable
            @clear="initData"
          ></el-input>
        </el-form-item>
        <el-form-item label="广告图位置">
          <el-select
            @focus="loadAllPosition"
            v-model="query.advimgpos"
            placeholder="请选择广告位"
            clearable
            @clear="initData"
          >
            <el-option
              v-for="item in positionList"
              :key="item.id"
              :label="item.advposname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchSubmit"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="searchCancel"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </tool-bar>

    <!-- 自定义表格组件 -->
    <custom-table
      title="广告图信息"
      :btn-list="['export']"
      :list="list"
      @refresh="refreshListData"
      show-index
      show-checkbox
      :columns="columnsData"
      :loading="loading"
    >

    <!-- 左侧自定义按钮 -->
    <template #btnbox>
      <el-button
            size="mini"
            plain
            type="primary"
            icon="el-icon-plus"
            @click="$refs.vinfo.isShow=true"
            v-permission="'ydd_advimg@add'"
            >{{ $t("base.add") }}</el-button>
    </template>

      <!-- 图片列 -->
      <template slot="advimgsrc" slot-scope="scope">
        <img
          style="width:120px;"
          :src="showImage(scope.row.advimgsrc)"
          alt=""
        />
      </template>
      <!-- 操作列 -->
      <template slot="action" slot-scope="scope">
        <el-button
          @click="edit({ ...scope.row })"
          icon="el-icon-edit"
          type="primary"
          circle
          size="small"
             v-permission="'ydd_advimg@update'"
        ></el-button>
        <el-button
          @click="del(scope.row.id)"
          type="danger"
          icon="el-icon-delete"
          circle
          size="small"
             v-permission="'ydd_advimg@del'"
        ></el-button>
      </template>
    </custom-table>

    <!-- 分页组件 -->
    <Pagination
      :total="total"
      :page.sync="page"
      :page-sizes="pageSizes"
      :limit.sync="limit"
      @pagination="paginationChange"
    >
    </Pagination>

    <!--  广告图添加/修改 -->
    <v-info ref="vinfo" @update-list="initData"></v-info>
  </div>
</template>

<script>
import vInfo from './components/info'
import { getListData, delData } from '@/api/adv/img'
import { getAllData as getAllPositionData } from '@/api/adv/pos'
import list from '@/mixins/list'
// 默认查询参数
const defaultQuery = {
  advimgdesc: '',
  advimgpos: ''
}
export default {
  name: 'imgIndex',
  components: {
    vInfo
  },
  data () {
    return {
      // 查询参数
      query: { ...defaultQuery },
      // 表格显示数据
      columnsData: [
        { prop: 'advposname', label: '广告图位' },
        { prop: 'advimgdesc', label: '广告图描述' },
        {
          prop: 'advimgsrc',
          label: '广告图',
          width: 240,
          template: 'advimgsrc'
        },
        { prop: 'advimglink', label: '广告图链接' }

      ],
      // 所有广告位
      positionList: []
    }
  },
  mixins: [list],
  methods: {
    async loadAllPosition () {
      this.positionList = await getAllPositionData()
    },
    // 初始化数据
    async initData () {
      try {
        this.loading = true
        const { query, page, limit } = this
        const { data, count } = await getListData({ ...query, page, limit })
        this.list = data
        this.total = count
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    showImage (pic) {
      return pic ? process.env.VUE_APP_WEB_URL + pic : ''
    },
    // 搜索提交
    searchSubmit () {
      this.page = 1
      this.initData()
    },
    // 搜索重置
    searchCancel () {
      this.page = 1
      this.query = { ...defaultQuery }
      this.initData()
    },
    // 删除
    async del (id) {
      try {
        await this.$confirm(this.$t('base.delConfimText'))
        await delData({ id })
        this.$message.success(this.$t('base.delSuccessText'))
        this.initData()
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
<style scoped></style>
